import { Button, DatePicker, Input, Select } from "antd";
import React, { useEffect, useState } from "react";
import style from "./index.module.css";
import { DownOutlined, UpOutlined } from "@ant-design/icons";
import moment from "moment";

const SearchBox = ({ search, options = [] }) => {
  const [optionList, setOptionList] = useState([]);
  const [moreOptionList, setMoreOptionList] = useState([]);
  const [showMore, setShowMore] = useState(false);
  const [data, setData] = useState({});
  useEffect(() => {
    console.assert(Array.isArray(options), "参数options 类型需要一个数组");
    if (Array.isArray(options)) {
      setOptionList(options.slice(0, 4));
      setMoreOptionList(options.slice(4));
      const obj = {};
      options
        .map((item) => item.field)
        .forEach((item) => {
          obj[item] = undefined;
        });
      setData(obj);
    }
  }, []);

  const change = (value, item) => {
    setData((val) => ({
      ...val,
      [item.field]: value,
    }));
    if (item.change) {
      item.change();
    }
  };
  const reset = () => {
    const obj = {};
    options
      .map((item) => item.field)
      .forEach((item) => {
        obj[item] = undefined;
      });
    setData(obj);
    search({});
  };
  const getSearchData = () => {
    const searchData = JSON.parse(JSON.stringify(data));
    Object.keys(searchData).forEach((item) => {
      if (moment(searchData[item]).isValid()) {
        searchData[item] = moment(searchData[item]).format("YYYY-MM-DD HH:mm:ss");
      }
    });
    search(searchData);
  };
  return (
    <div className={style.warp}>
      <div className={style.searchBox}>
        {optionList.map((item, index) => {
          return (
            <div key={index} className={style.searchItem}>
              <div className={style.label}>{item.label}</div>
              {item.type === "input" && <Input placeholder={`请输入${item.label}`} value={data[item.field]} onChange={(e) => change(e.target.value, item)} style={{ width: "220px" }} />}
              {item.type === "select" && <Select placeholder={`请选择${item.label}`} showSearch value={data[item.field]} onChange={(e) => change(e, item)} options={item.options} style={{ width: "220px" }} />}
              {item.type === "date" && <DatePicker placeholder={`请选择${item.label}`} value={data[item.field]} onChange={(date, dateString) => change(date, item)} picker={item.picker} style={{ width: "220px" }} />}
            </div>
          );
        })}

        {showMore &&
          moreOptionList.map((item, index) => {
            return (
              <div key={index} className={style.searchItem}>
                <div className={style.label}>{item.label}</div>
                {item.type === "input" && <Input placeholder={`请输入${item.label}`} value={data[item.field]} onChange={(e) => change(e.target.value, item)} style={{ width: "220px" }} />}
                {item.type === "select" && <Select placeholder={`请选择${item.label}`} showSearch value={data[item.field]} onChange={(e) => change(e, item)} options={item.options} style={{ width: "220px" }} />}
                {item.type === "date" && <DatePicker placeholder={`请选择${item.label}`} value={data[item.field]} onChange={(date, dateString) => change(date, item)} picker={item.picker} style={{ width: "220px" }} />}
              </div>
            );
          })}
      </div>
      <div className={style.showMore} onClick={() => setShowMore(!showMore)}>
        {showMore ? <UpOutlined /> : <DownOutlined />}
        <div className={style.label}>更多选项</div>
      </div>
      <div className={style.searchBtnBox}>
        <Button type="primary" onClick={getSearchData}>
          搜索
        </Button>
        <Button onClick={reset}>重置</Button>
      </div>
    </div>
  );
};
export default SearchBox;
